<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="utf-8">
    <title>贪吃蛇游戏注册</title>
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>-->
    <script src="js/jquery-3.4.1.js" charset="UTF-8"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        text-decoration: none;
        font-family: montserrat;
        box-sizing: border-box;
    }

    body{
        min-height: 100vh;
        background-image: linear-gradient(120deg, #3498db, #8e44ad);
    }

    .login-form{
        width: 360px;
        background: #f1f1f1;
        height: 580px;
        padding: 80px 40px;
        border-radius: 10px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .login-form h1{
        text-align: center;
        margin-bottom: 60px;
    }

    .txtb{
        border-bottom: 2px solid #adadad;
        position: relative;
        margin: 30px 0;
    }

    .txtb input{
        font-size: 15px;
        color: #333;
        border: none;
        width: 100%;
        outline: none;
        background: none;
        padding: 0 5px;
        height: 40px;
    }

    .txtb span::before{
        content: attr(data-placeholder);
        position: absolute;
        top: 50%;
        left: 5px;
        color: #adadad;
        transform: translateY(-50%);
        z-index: -1;
        transition: .5s;
    }

    .txtb span::after{
        content: '';
        position: absolute;
        left: 0%;
        top: 100%;
        width: 0%;
        height: 2px;
        background: linear-gradient(120deg, #3498db, #8e44ad);
        transition: .5s;
    }

    .focus + span::before{
        top: -5px;
    }

    .focus + span::after{
        width: 100%;
    }

    .logbtn{
        display: block;
        width: 100%;
        height: 50px;
        border: none;
        background: linear-gradient(120deg, #3498db, #8e44ad, #3498db);
        background-size: 200%;
        color: #fff;
        outline: none;
        cursor: pointer;
        transition: .5s;
    }

    .logbtn:hover{
        background-position: right;
    }

    .bottom-text{
        margin-top: 60px;
        text-align: center;
        font-size: 13px;
    }
</style>
<body>

<div  class="login-form">
    <h1>Sign Up</h1>

    <div class="txtb">
        <input type="text" id="userName">
        <span data-placeholder="Username"></span>
    </div>

    <div class="txtb">
        <input type="password" id="password">
        <span data-placeholder="Password"></span>
    </div>

    <input type="submit" class="logbtn" onclick="login()" value="Sign up">

    <div class="bottom-text">
        Go to Index <a href="/index">Go</a>
    </div>

</div>

<script type="text/javascript">

    function login(){
        if ($("#userName").val() ==='' || $("#password").val() === ''){
            alert("登录信息不能为空");
            return;
        }
        $.ajax({
            type : "POST",
            url : "/userSignUp",
            contentType : "application/json;charset=UTF-8",
            dataType : "json",
            data : JSON.stringify({
                "username" : $("#userName").val(),
                "password" : $("#password").val()
            }),
            success : function (data) {
                if (data){
                    console.log(data);
                    location.href="/";
                }else {
                    alert(data);
                    alert("Sign Up Failed!");
                }
            }
        })
    }



    $(".txtb input").on("focus", function(){
        $(this).addClass("focus");
    });
    $(".txtb input").on("blur", function(){
        if($(this).val() == "")
            $(this).removeClass("focus");
    });
</script>

</body>
</html>